<script setup>
import { useSlots } from "@vue/runtime-core";

const slots = useSlots();

defineProps({
  label: String,
});
</script>

<template>
  <div class="panel">
    <header v-if="slots['toolbar']" class="flex between">
      <span>{{ label }}</span>
      <div class="inline">
        <slot name="toolbar"></slot>
      </div>
    </header>
    <header v-else>
      {{ label }}
    </header>
    <div class="panel-body">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
div.panel {
  min-height: 300px;
  width: calc(33% - 20px);
  border: 1px solid #f3f3f3;
  margin: 10px;
  background: white;
  border-radius: 6px;
  header {
    background-color: white;
    border-bottom: 1px solid #dedede;
    color: #2e2e2e;
    line-height: 56px;
  }

  .panel-body {
    width: auto;
    height: auto;
  }
}
</style>